<template>
  <li
    :class="
      header
        ? ['z-timeline-header']
        : [
            'z-timeline-item',
            'z-timeline-item__' + direction,
            { 'z-timeline__end': isEnd }
          ]
    "
    :style="{ color }"
  >
    <template v-if="header">
      <h2>{{ header }}</h2>
    </template>
    <template v-else>
      <div class="z-timeline-item-content">
        <slot />
      </div>
    </template>
  </li>
</template>

<script>
export default {
  name: "TimeLineItem",
  props: {
    data: Object,
    header: String,
    direction: {
      type: String,
      default: "left"
    },
    color: String,
    isEnd: {
      type: Boolean,
      default: false
    }
  }
};
</script>

<style scoped></style>
